export const ChartMixin = {
  props: {
    cid: {
      type: [String],
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      this.chart = this.$chart.init(this.$el)
      this.setOptions()
    }
  }
}

export const StatisticsMixin = {
  props: {
    title: {
      type: [String],
      required: true
    },
    subtitle: {
      type: [String],
      required: true
    }
  }
}

export const TableMixin = {
  components: {
    WrapPagination: () => import('./WrapPagination')
  },
  data() {
    return {
      table: {
        page: 1,
        size: 10,
        total: 0,
        data: [],
        loading: false
      }
    }
  },
  methods: {
    wrapList(callback, params) {
      const config = {
        page: this.table.page,
        limit: this.table.size
      }

      this.table.loading = true

      return callback(Object.assign({}, config, params)).then((res) => {
        this.table.data = res.data
        this.table.total = res.total
      }).finally(() => {
        this.table.loading = false
      })
    },
    wrapResourceList(callback, params) {
      const config = {
        page: this.table.page,
        limit: this.table.size
      }

      this.table.loading = true

      return callback(Object.assign({}, config, params)).then((res) => {
        this.table.data = res.data
        if (res.meta) {
          this.table.total = res.meta.total
        } else {
          this.table.total = res.total
        }
      }).finally(() => {
        this.table.loading = false
      })
    },
    handleCurrentChange(page) {
      this.table = Object.assign({}, this.table, {
        page: page
      })
      this.getList()
    },
    handleSizeChange(size) {
      this.table = Object.assign({}, this.table, {
        size: size
      })
      this.getList()
    }
  }
}
